<template>
  <div class="box">
    <div class="breadcrumb-container">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="(link, index) in breadcrumbLinks" :key="link.to">
            <span v-if="link.forbid || index == breadcrumbLinks.length - 1" class="no-redirect">
              {{ link.title }}
            </span>
            <a v-else class="breadcrumb-font-color" @click.prevent="onBreadcrumbClick(link)">
              {{ link.title }}
            </a>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>

    <div class="avatar-container circle" @mouseover="showMenu" @mouseout="hideMenu">
      <!-- <el-avatar>斌6子</el-avatar> -->
      <span>斌</span>
      <ul v-show="menuVisible" class="menu">
        <li>个人信息</li>
        <li>退出登录</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      breadcrumbLinks: [],
      menuVisible: false,
    };
  },
  mounted() {
    this.updateBreadcrumb(); // 初始更新面包屑导航
    this.$router.afterEach(to => {
      this.updateBreadcrumb(to); // 导航完成后更新面包屑导航
    });
  },
  methods: {
    // 更新面包屑
    updateBreadcrumb(to) {
      const matchedRoutes = this.$route.matched;
      if (matchedRoutes.length > 0) {
        this.breadcrumbLinks = matchedRoutes.map(route => {
          // 检查路由是否有重定向
          const finalPath = route.redirect || route.path;
          const forbid = route.meta.forbid ? true : false;
          return {
            to: finalPath,
            title: route.meta.title,
            forbid: forbid,
          };
        });
      }
    },
    // 点击面包屑跳转
    onBreadcrumbClick(link) {
      // 确保目标路径是绝对路径
      if (link.to === 'home') {
        this.$router.push('/');
        return;
      }
      // 如果目标路径与当前路径不同，则进行路由跳转
      if (this.$route.path !== link.to) {
        this.$router.push(link.to);
      } else {
        console.log('Already on the target page:', link.to);
      }
    },
    showMenu() {
      this.menuVisible = true;
    },
    hideMenu() {
      this.menuVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 100%;
}

.breadcrumb-container,
.avatar-container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

// 圆
.circle {
  background-color: #c0c4cc;
  width: 50px;
  height: 50px;
  border-radius: 50%; /* 将元素的边角设置为50%，即可创建一个圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  span {
    color: #fff;
  }
}

// 面包屑样式
.no-redirect {
  color: skyblue;
  font-weight: bold;
  cursor: text;
}

.breadcrumb-font-color {
  color: #97a8be;
  font-weight: bold;
}

.menu {
  list-style-type: none;
  position: absolute;
  top: 50px; /* Adjust this value as needed to position the menu correctly */
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.menu li {
  padding: 5px 0;
  cursor: pointer;
}

.menu li:hover {
  background-color: #f5f5f5;
}

//面包屑跳转动画
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.8s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.8s;
}

.breadcrumb-leave-active {
  position: absolute;
}
</style>
